<div class="layui-form layui-layer-outerbox">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><span style="color:red">*</span> 新闻标题</label>
        <div class="layui-input-block layui-block-middle">
            <input type="text" name="{{makeElUniqueName('title')}}" required lay-verify="required" autocomplete="off" class="layui-input" value="{{ isset($news)?$news->title:'' }}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><span style="color:red">*</span> 新闻图片</label>
        <div class="layui-input-block layui-block-middle">
            <div class="layui-big-upload-box">
                <img id="{{makeElUniqueName('activity_upload_img')}}" src="/images/no-pic-back.png">
                <input type="hidden" name="{{ makeElUniqueName('id') }}" value="{{ isset($news)?$news->id:'' }}">
                <input type="hidden" name="{{makeElUniqueName('activity_img_file_id')}}" value="">
                <div class="site-demo-upbar">
                    <input type="file" name="{{makeElUniqueName('picture')}}" class="layui-upload-file" id="{{makeElUniqueName('picture')}}">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><span style="color:red">*</span> 新闻类型</label>
        <div class="layui-input-block layui-block-middle">
            <select name="{{makeElUniqueName('type')}}" required lay-verify="required">
                @foreach(\App\News::$NEWS_TYPE as $item)
                    <option value='{{$item['key']}}' {{ $item['key']==$news->type?'selected':'' }}>{{$item['text']}}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><span style="color:red">*</span> 地址</label>
        <div class="layui-input-inline layui-short-input">
            <select name="{{makeElUniqueName('group_province')}}" lay-filter="{{makeElUniqueName('group_province')}}" required lay-verify="{{makeElUniqueName('group_province')}}">
                <option value="">(请选择省份)</option>
            </select>
        </div>
        <div class="layui-input-inline layui-short-input">
            <select name="{{makeElUniqueName('group_city')}}" lay-filter="{{makeElUniqueName('group_city')}}" required lay-verify="{{makeElUniqueName('group_city')}}">
                <option value="">(请选择城市)</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><span style="color:red">*</span> 新闻内容</label>
        <div class="layui-input-block layui-block-middle">
            <textarea class="layui-textarea" id="{{makeElUniqueName('description')}}" name="{{makeElUniqueName('description')}}" style="display: none">
                {{ isset($news)?$news->description:''  }}
            </textarea>
        </div>
    </div>
    <div class="layui-form-item layui-form-center">
        <button class="layui-btn" lay-submit lay-filter="{{makeElUniqueName('activity_save')}}"><i class="layui-icon">&#xe605;</i> 保存</button>
        <button class="layui-btn layui-btn-primary" onclick="layer.close(layui.popLayerUtil.index);">关闭</button>
    </div>
</div>

<script>
    layui.use(['form', 'validator', 'uploadUtil', 'dateRangeUtil', 'selectBox', 'layedit','addressUtil','reditorUtil'], function(){
        var form = layui.form();
        var $ = layui.jquery;
        var layer = layui.layer;
        var popLayerUtil = layui.popLayerUtil;
        var dateRangeUtil = layui.dateRangeUtil;
        var uploadUtil = layui.uploadUtil;
        var selectBox = layui.selectBox;
        var layedit = layui.layedit;
        var addressUtil = layui.addressUtil;
        // var descIndex = layedit.build('{{makeElUniqueName('description')}}');
        var reditorUtil = layui.reditorUtil;

        form.render();

        var defaultProvince = {{ isset($news)?(!empty($news->province_id)?$news->province_id:0):0 }};
        var defaultCity = {{ isset($news)?(!empty($news->city_id)?$news->city_id:0):0 }};

        addressUtil.threeLevelAddressSelect({
            provinceSelect: $('select[name=\'{{makeElUniqueName('group_province')}}\']'),
            defaultProvince: defaultProvince,
            citySelect: $('select[name=\'{{makeElUniqueName('group_city')}}\']'),
            defaultCity: defaultCity
        });

        // var descIndex = layedit.build('{{makeElUniqueName('description')}}');
        var descIndex = reditorUtil.doInitEditor({elemId:'{{makeElUniqueName('description')}}'});
        
        uploadUtil.doUpload({
            success: function(fileId, filePath, fileKey) {
                if (fileKey == '{{makeElUniqueName('picture')}}') {
                    $('#{{makeElUniqueName('activity_upload_img')}}').attr('src', filePath);
                    $('input[name=\'{{makeElUniqueName('activity_img_file_id')}}\']').val(fileId);
                }
            }
        });

        dateRangeUtil.makeDateRange({
            startElem: $('input[name=\'{{makeElUniqueName('enter_time_start')}}\']'),
            endElem: $('input[name=\'{{makeElUniqueName('enter_time_end')}}\']'),
            isDateTime: true,
            format: 'YYYY-MM-DD hh:mm'
        });

        dateRangeUtil.makeDateRange({
            startElem: $('input[name=\'{{makeElUniqueName('active_time_start')}}\']'),
            endElem: $('input[name=\'{{makeElUniqueName('active_time_end')}}\']'),
            isDateTime: true,
            format: 'YYYY-MM-DD hh:mm'
        });

        form.verify({
        {{makeElUniqueName('group_province')}}: function(value, item){
                if (value == '0') {
                    return '必须输入省份';
                }
            },
            {{makeElUniqueName('group_city')}}: function(value, item){
                if (value == '0') {
                    return '必须输入城市';
                }
            }
        });

        form.on('submit({{makeElUniqueName('activity_save')}})', function(data){
            var index = layer.load(1);
            var url = '/backstage/api/news/update';
            var postParam = {
                id: data.field['{{makeElUniqueName('id')}}'],
                title: data.field['{{makeElUniqueName('title')}}'],
                picture: data.field['{{makeElUniqueName('activity_img_file_id')}}'],
                type: data.field['{{makeElUniqueName('type')}}'],
                description: layedit.getContent(descIndex),
                province_id: data.field['{{makeElUniqueName('group_province')}}'],
                city_id: data.field['{{makeElUniqueName('group_city')}}']
            };

            $.ajax({
                contentType: "application/json",
                type: 'post',
                url: url,
                data: JSON.stringify(postParam),
                success: function (outResult) {
                    layer.close(index);
                    if (outResult.Success) {
                        layer.msg(outResult.Message, { icon: 6 });
                        layer.close(popLayerUtil.index);
                        popLayerUtil.onClose();
                    } else {
                        layer.msg(outResult.Message, { icon: 5 });
                    }
                },
                error: function (error) {
                    layer.close(index);
                    layui.validator.processValidateError(error);
                }
            });
            return false;
        });
    });
</script>
